<template>
   <swiper :list="list" loop auto v-model="index" @on-index-change="change">
      <p class="wpTitle" v-if="wpTitle">{{ wpTitle }}</p>
   </swiper>
</template>

<script>
import { Swiper } from 'vux'
export default {
   data (){
      return {
         index: 0
      }
   },
   props: {
      list: {
         type: Array,
         default: [
            {
               url : 'javascript:;',
               img : require('../../assets/banner1.jpg')
            },
         ]
      },
      wpTitle: {
         type: String,
         default: '',
      }
   },
	components: {
      Swiper
	},
   methods: {
     change (index){
         this.index = index
     }
   }
}
</script>

<style lang="">
   .vux-slider .wpTitle{position: absolute; z-index: 9; width: 100%; text-align: center; font-size: 0.16rem; top:40%;}
   .vux-slider .wpTitle:after{display: block; content: ''; width:0.4rem; height:2px; background:#002665; margin:0.06rem auto;}
</style>